<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站举报功能样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --warning: #F59E0B;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    
    .page-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-btn {
      background: none;
      border: none;
      font-size: 20px;
      color: #6B7280;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .close-btn:hover {
      background-color: #F3F4F6;
    }
    
    /* 举报内容预览 */
    .report-preview {
      padding: 16px;
      border-bottom: 1px solid var(--border-light);
      background-color: #F9FAFB;
    }
    
    .preview-header {
      font-size: 14px;
      color: #6B7280;
      margin-bottom: 8px;
    }
    
    .preview-content {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
      font-size: 15px;
    }
    
    /* 举报样式容器 */
    .report-container {
      display: none;
      padding: 16px;
    }
    
    .report-container.active {
      display: block;
    }
    
    .report-description {
      font-size: 14px;
      color: #6B7280;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    
    /* 举报原因选项通用样式 */
    .report-reason {
      padding: 14px 16px;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .report-reason:hover {
      border-color: var(--primary);
      background-color: #F9FAFB;
    }
    
    .report-reason.selected {
      border-color: var(--primary);
      background-color: rgba(79, 70, 229, 0.05);
    }
    
    .reason-header {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
    }
    
    .reason-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: rgba(79, 70, 229, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .reason-title {
      font-weight: 500;
      font-size: 16px;
    }
    
    .reason-description {
      font-size: 13px;
      color: #6B7280;
      margin-left: 36px;
      line-height: 1.4;
    }
    
    /* 补充说明区域 */
    .additional-info {
      margin-top: 20px;
    }
    
    .info-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    
    .info-input {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      font-size: 15px;
      resize: none;
      min-height: 100px;
    }
    
    .info-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    }
    
    .info-hint {
      font-size: 12px;
      color: #6B7280;
      margin-top: 8px;
      text-align: right;
    }
    
    /* 提交按钮 */
    .submit-btn {
      width: 100%;
      padding: 14px;
      background-color: var(--danger);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      margin-top: 24px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .submit-btn:hover {
      background-color: #DC2626;
    }
    
    .submit-btn:disabled {
      background-color: #E5E7EB;
      cursor: not-allowed;
    }
    
    /* 样式1: 基础列表式举报 */
    .report-style-1 .report-reason {
      position: relative;
    }
    
    .report-style-1 .report-reason.selected::after {
      content: "\f00c";
      font-family: "FontAwesome";
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary);
      font-size: 18px;
    }
    
    /* 样式2: 分类分组式举报 */
    .report-style-2 .report-category {
      margin-bottom: 20px;
    }
    
    .report-style-2 .category-title {
      font-size: 14px;
      color: #6B7280;
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    .report-style-2 .report-reasons {
      background-color: #F9FAFB;
      border-radius: 8px;
      padding: 4px;
    }
    
    /* 样式3: 步骤引导式举报 */
    .report-style-3 .report-steps {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      position: relative;
    }
    
    .report-style-3 .report-steps::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 24px;
      right: 24px;
      height: 2px;
      background-color: var(--border-light);
      z-index: 1;
    }
    
    .report-style-3 .step {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      z-index: 2;
    }
    
    .report-style-3 .step.active {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    .report-style-3 .step.completed {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    .report-style-3 .step-content {
      display: none;
    }
    
    .report-style-3 .step-content.active {
      display: block;
    }
    
    .report-style-3 .step-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
    }
    
    .report-style-3 .step-btn {
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .report-style-3 .prev-btn {
      background-color: white;
      border: 1px solid var(--border-light);
      color: var(--dark);
    }
    
    .report-style-3 .next-btn {
      background-color: var(--primary);
      border: none;
      color: white;
    }
    
    .report-style-3 .submit-btn {
      margin-top: 0;
    }
    
    /* 样式4: 简洁快捷举报 */
    .report-style-4 .report-reasons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .report-style-4 .report-reason {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 16px 12px;
    }
    
    .report-style-4 .reason-icon {
      margin-right: 0;
      margin-bottom: 10px;
      width: 40px;
      height: 40px;
      font-size: 18px;
    }
    
    .report-style-4 .reason-title {
      font-size: 14px;
    }
    
    .report-style-4 .reason-description {
      display: none;
    }
    
    .report-style-4 .additional-info {
      margin-top: 16px;
    }
    
    /* 样式5: 举报确认流程 */
    .report-style-5 .report-step {
      display: none;
      animation: fadeIn 0.3s ease;
    }
    
    .report-style-5 .report-step.active {
      display: block;
    }
    
    .report-style-5 .report-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 0 auto 24px;
    }
    
    .report-style-5 .step-title {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 12px;
    }
    
    .report-style-5 .step-description {
      font-size: 14px;
      color: #6B7280;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.5;
    }
    
    .report-style-5 .report-actions {
      display: flex;
      gap: 10px;
    }
    
    .report-style-5 .action-btn {
      flex: 1;
      padding: 14px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .report-style-5 .cancel-btn {
      background-color: white;
      border: 1px solid var(--border-light);
      color: var(--dark);
    }
    
    .report-style-5 .confirm-btn {
      background-color: var(--danger);
      border: none;
      color: white;
    }
    
    .report-style-5 .success-icon {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--secondary);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .report-style-4 .reason-title {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">举报功能样式</div>
    <div class="switcher-option active" data-style="1">基础列表式</div>
    <div class="switcher-option" data-style="2">分类分组式</div>
    <div class="switcher-option" data-style="3">步骤引导式</div>
    <div class="switcher-option" data-style="4">简洁快捷式</div>
    <div class="switcher-option" data-style="5">确认流程式</div>
  </div>
  
  <div class="container">
    <div class="page-header">
      <h1 class="page-title">举报内容</h1>
      <button class="close-btn"><i class="fa fa-times"></i></button>
    </div>
    
    <!-- 举报内容预览 -->
    <div class="report-preview">
      <div class="preview-header">举报对象预览：</div>
      <div class="preview-content">
        这是一条违规内容示例，可能包含不适当言论、垃圾信息或其他违反社区规定的内容。
      </div>
    </div>
    
    <!-- 1. 基础列表式举报 -->
    <div class="report-container active report-style-1" id="report1">
      <p class="report-description">
        请选择举报原因，帮助我们更好地处理违规内容。我们会严格保密您的举报信息。
      </p>
      
      <div class="report-reasons">
        <div class="report-reason" data-reason="spam">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-ban"></i></div>
            <div class="reason-title">垃圾信息或广告</div>
          </div>
          <div class="reason-description">
            包含无关广告、重复内容、链接推广或其他垃圾信息
          </div>
        </div>
        
        <div class="report-reason" data-reason="harassment">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-exclamation-triangle"></i></div>
            <div class="reason-title">骚扰或不友善行为</div>
          </div>
          <div class="reason-description">
            包含人身攻击、辱骂、威胁或其他不友善的言论
          </div>
        </div>
        
        <div class="report-reason" data-reason="inappropriate">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
            <div class="reason-title">不适当或成人内容</div>
          </div>
          <div class="reason-description">
            包含色情、暴力或其他不适合公开展示的内容
          </div>
        </div>
        
        <div class="report-reason" data-reason="misinformation">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-question-circle"></i></div>
            <div class="reason-title">虚假信息</div>
          </div>
          <div class="reason-description">
            包含谣言、虚假陈述或误导性信息
          </div>
        </div>
        
        <div class="report-reason" data-reason="copyright">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-copyright"></i></div>
            <div class="reason-title">侵犯版权</div>
          </div>
          <div class="reason-description">
            未经授权使用受版权保护的内容
          </div>
        </div>
        
        <div class="report-reason" data-reason="other">
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-ellipsis-h"></i></div>
            <div class="reason-title">其他原因</div>
          </div>
          <div class="reason-description">
            不属于上述分类的其他违规内容
          </div>
        </div>
      </div>
      
      <div class="additional-info">
        <label class="info-label" for="info1">补充说明（可选）</label>
        <textarea id="info1" class="info-input" placeholder="请详细描述违规内容，帮助我们更快处理..."></textarea>
        <div class="info-hint">0/500</div>
      </div>
      
      <button class="submit-btn" disabled>提交举报</button>
    </div>
    
    <!-- 2. 分类分组式举报 -->
    <div class="report-container report-style-2" id="report2">
      <p class="report-description">
        请选择合适的举报类别和具体原因，我们将根据您的举报进行审核处理。
      </p>
      
      <div class="report-category">
        <div class="category-title">内容性质问题</div>
        <div class="report-reasons">
          <div class="report-reason" data-reason="pornography">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
              <div class="reason-title">色情或低俗内容</div>
            </div>
            <div class="reason-description">包含露骨色情、低俗或挑逗性内容</div>
          </div>
          
          <div class="report-reason" data-reason="violence">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-shield"></i></div>
              <div class="reason-title">暴力或有害内容</div>
            </div>
            <div class="reason-description">包含暴力、自残或鼓励伤害他人的内容</div>
          </div>
        </div>
      </div>
      
      <div class="report-category">
        <div class="category-title">行为规范问题</div>
        <div class="report-reasons">
          <div class="report-reason" data-reason="harassment">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-exclamation-triangle"></i></div>
              <div class="reason-title">骚扰或欺凌</div>
            </div>
            <div class="reason-description">针对个人的恶意攻击、骚扰或欺凌行为</div>
          </div>
          
          <div class="report-reason" data-reason="spam">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-ban"></i></div>
              <div class="reason-title">垃圾信息</div>
            </div>
            <div class="reason-description">无关广告、重复内容或恶意推广</div>
          </div>
        </div>
      </div>
      
      <div class="report-category">
        <div class="category-title">其他问题</div>
        <div class="report-reasons">
          <div class="report-reason" data-reason="copyright">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-copyright"></i></div>
              <div class="reason-title">侵犯知识产权</div>
            </div>
            <div class="reason-description">未经授权使用受版权保护的内容</div>
          </div>
          
          <div class="report-reason" data-reason="other">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-ellipsis-h"></i></div>
              <div class="reason-title">其他违规内容</div>
            </div>
            <div class="reason-description">不符合社区规范的其他内容</div>
          </div>
        </div>
      </div>
      
      <div class="additional-info">
        <label class="info-label" for="info2">详细说明</label>
        <textarea id="info2" class="info-input" placeholder="请提供更多细节，帮助我们更好地理解问题..."></textarea>
        <div class="info-hint">0/500</div>
      </div>
      
      <button class="submit-btn" disabled>提交举报</button>
    </div>
    
    <!-- 3. 步骤引导式举报 -->
    <div class="report-container report-style-3" id="report3">
      <div class="report-steps">
        <div class="step active" data-step="1">1</div>
        <div class="step" data-step="2">2</div>
        <div class="step" data-step="3">3</div>
      </div>
      
      <div class="step-content active" data-step="1">
        <p class="report-description">
          第一步：选择举报的主要原因
        </p>
        
        <div class="report-reasons">
          <div class="report-reason" data-reason="inappropriate">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
              <div class="reason-title">内容不合适</div>
            </div>
            <div class="reason-description">内容包含不适当、冒犯性或违反规定的信息</div>
          </div>
          
          <div class="report-reason" data-reason="violation">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-gavel"></i></div>
              <div class="reason-title">违反社区规定</div>
            </div>
            <div class="reason-description">内容明显违反社区规范和使用条款</div>
          </div>
          
          <div class="reason-header">
            <div class="reason-icon"><i class="fa fa-user"></i></div>
            <div class="reason-title">用户行为问题</div>
          </div>
          <div class="reason-description">涉及骚扰、欺诈或其他不良用户行为</div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn prev-btn" disabled>上一步</button>
          <button class="step-btn next-btn" disabled>下一步</button>
        </div>
      </div>
      
      <div class="step-content" data-step="2">
        <p class="report-description">
          第二步：选择具体的违规类型
        </p>
        
        <div class="report-reasons">
          <div class="report-reason" data-reason="spam">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-ban"></i></div>
              <div class="reason-title">垃圾信息或广告</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="harassment">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-exclamation-triangle"></i></div>
              <div class="reason-title">骚扰或欺凌</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="inappropriate">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
              <div class="reason-title">不适当内容</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="misinformation">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-question-circle"></i></div>
              <div class="reason-title">虚假信息</div>
            </div>
          </div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn prev-btn">上一步</button>
          <button class="step-btn next-btn" disabled>下一步</button>
        </div>
      </div>
      
      <div class="step-content" data-step="3">
        <p class="report-description">
          第三步：提供额外信息（可选）
        </p>
        
        <div class="additional-info">
          <label class="info-label" for="info3">详细说明</label>
          <textarea id="info3" class="info-input" placeholder="请描述具体问题，或提供相关证据..."></textarea>
          <div class="info-hint">0/500</div>
        </div>
        
        <div class="step-actions">
          <button class="step-btn prev-btn">上一步</button>
          <button class="step-btn submit-btn">提交举报</button>
        </div>
      </div>
    </div>
    
    <!-- 4. 简洁快捷式举报 -->
    <div class="report-container report-style-4" id="report4">
      <p class="report-description">
        快速举报：选择以下原因之一
      </p>
      
      <div class="report-reasons">
        <div class="report-reason" data-reason="spam">
          <div class="reason-icon"><i class="fa fa-ban"></i></div>
          <div class="reason-title">垃圾广告</div>
        </div>
        
        <div class="report-reason" data-reason="harassment">
          <div class="reason-icon"><i class="fa fa-exclamation-triangle"></i></div>
          <div class="reason-title">骚扰内容</div>
        </div>
        
        <div class="report-reason" data-reason="inappropriate">
          <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
          <div class="reason-title">不当内容</div>
        </div>
        
        <div class="report-reason" data-reason="misinformation">
          <div class="reason-icon"><i class="fa fa-question-circle"></i></div>
          <div class="reason-title">虚假信息</div>
        </div>
        
        <div class="report-reason" data-reason="copyright">
          <div class="reason-icon"><i class="fa fa-copyright"></i></div>
          <div class="reason-title">版权问题</div>
        </div>
        
        <div class="report-reason" data-reason="other">
          <div class="reason-icon"><i class="fa fa-ellipsis-h"></i></div>
          <div class="reason-title">其他原因</div>
        </div>
      </div>
      
      <div class="additional-info">
        <label class="info-label" for="info4">补充说明（可选）</label>
        <textarea id="info4" class="info-input" placeholder="简要说明情况..."></textarea>
        <div class="info-hint">0/300</div>
      </div>
      
      <button class="submit-btn" disabled>快速举报</button>
    </div>
    
    <!-- 5. 举报确认流程 -->
    <div class="report-container report-style-5" id="report5">
      <!-- 选择原因步骤 -->
      <div class="report-step active" data-step="1">
        <div class="report-icon">
          <i class="fa fa-flag"></i>
        </div>
        
        <h3 class="step-title">为什么要举报这条内容？</h3>
        <p class="step-description">
          请选择最符合的原因，帮助我们准确处理
        </p>
        
        <div class="report-reasons">
          <div class="report-reason" data-reason="spam">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-ban"></i></div>
              <div class="reason-title">垃圾信息或广告</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="harassment">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-exclamation-triangle"></i></div>
              <div class="reason-title">骚扰或不友善行为</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="inappropriate">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-eye-slash"></i></div>
              <div class="reason-title">不适当或成人内容</div>
            </div>
          </div>
          
          <div class="report-reason" data-reason="other">
            <div class="reason-header">
              <div class="reason-icon"><i class="fa fa-ellipsis-h"></i></div>
              <div class="reason-title">其他原因</div>
            </div>
          </div>
        </div>
        
        <div class="report-actions">
          <button class="action-btn cancel-btn">取消</button>
          <button class="action-btn confirm-btn" disabled>下一步</button>
        </div>
      </div>
      
      <!-- 确认举报步骤 -->
      <div class="report-step" data-step="2">
        <div class="report-icon">
          <i class="fa fa-info"></i>
        </div>
        
        <h3 class="step-title">确认举报？</h3>
        <p class="step-description">
          提交后，我们将在24小时内审核这条内容。多次恶意举报可能导致您的账号受限。
        </p>
        
        <div class="additional-info">
          <label class="info-label" for="info5">补充说明（可选）</label>
          <textarea id="info5" class="info-input" placeholder="有其他信息可以帮助我们处理..."></textarea>
        </div>
        
        <div class="report-actions">
          <button class="action-btn cancel-btn">返回修改</button>
          <button class="action-btn confirm-btn">确认举报</button>
        </div>
      </div>
      
      <!-- 举报成功步骤 -->
      <div class="report-step" data-step="3">
        <div class="report-icon success-icon">
          <i class="fa fa-check"></i>
        </div>
        
        <h3 class="step-title">举报已提交</h3>
        <p class="step-description">
          感谢您的反馈！我们会尽快处理并采取适当措施。您可以在"我的举报"中查看进度。
        </p>
        
        <div class="report-actions">
          <button class="action-btn cancel-btn">关闭</button>
          <button class="action-btn confirm-btn">查看其他内容</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的举报样式
    let currentReportStyle = '1';
    let selectedReason = null;
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const reportContainers = {
      '1': document.getElementById('report1'),
      '2': document.getElementById('report2'),
      '3': document.getElementById('report3'),
      '4': document.getElementById('report4'),
      '5': document.getElementById('report5')
    };
    const closeBtn = document.querySelector('.close-btn');
    
    // 切换举报样式
    function switchReportStyle(style) {
      // 重置状态
      selectedReason = null;
      
      // 隐藏所有举报容器
      Object.values(reportContainers).forEach(container => {
        container.classList.remove('active');
      });
      
      // 显示选中的举报样式
      if (reportContainers[style]) {
        reportContainers[style].classList.add('active');
        currentReportStyle = style;
        
        // 重置当前样式中的选择状态
        resetCurrentStyle();
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 重置当前样式的选择状态
    function resetCurrentStyle() {
      const container = reportContainers[currentReportStyle];
      
      // 移除所有选中状态
      container.querySelectorAll('.report-reason').forEach(reason => {
        reason.classList.remove('selected');
      });
      
      // 禁用提交按钮
      const submitBtn = container.querySelector('.submit-btn, .confirm-btn');
      if (submitBtn) {
        submitBtn.disabled = true;
      }
      
      // 清空文本框
      const textarea = container.querySelector('.info-input');
      if (textarea) {
        textarea.value = '';
        updateCharCount(textarea);
      }
      
      // 对于步骤式，重置到第一步
      if (currentReportStyle === '3') {
        goToStep(1);
      }
      
      // 对于确认流程式，重置到第一步
      if (currentReportStyle === '5') {
        showStep(1);
      }
    }
    
    // 更新字符计数
    function updateCharCount(textarea) {
      const hintEl = textarea.parentElement.querySelector('.info-hint');
      if (hintEl) {
        const maxLength = textarea.getAttribute('maxlength') || 500;
        const currentLength = textarea.value.length;
        hintEl.textContent = `${currentLength}/${maxLength}`;
      }
    }
    
    // 步骤引导式相关函数
    function goToStep(stepNum) {
      const container = reportContainers['3'];
      
      // 更新步骤指示器
      container.querySelectorAll('.step').forEach(step => {
        const stepId = parseInt(step.getAttribute('data-step'));
        step.classList.remove('active', 'completed');
        
        if (stepId === stepNum) {
          step.classList.add('active');
        } else if (stepId < stepNum) {
          step.classList.add('completed');
        }
      });
      
      // 更新步骤内容
      container.querySelectorAll('.step-content').forEach(content => {
        content.classList.remove('active');
        if (parseInt(content.getAttribute('data-step')) === stepNum) {
          content.classList.add('active');
        }
      });
      
      // 更新按钮状态
      const prevBtn = container.querySelector(`.step-content[data-step="${stepNum}"] .prev-btn`);
      const nextBtn = container.querySelector(`.step-content[data-step="${stepNum}"] .next-btn`);
      
      if (prevBtn) {
        prevBtn.disabled = stepNum === 1;
      }
      
      if (nextBtn) {
        nextBtn.disabled = true;
      }
      
      // 重置当前步骤的选择
      const reasons = container.querySelectorAll(`.step-content[data-step="${stepNum}"] .report-reason`);
      reasons.forEach(reason => {
        reason.classList.remove('selected');
      });
    }
    
    // 确认流程式相关函数
    function showStep(stepNum) {
      const container = reportContainers['5'];
      
      container.querySelectorAll('.report-step').forEach(step => {
        step.classList.remove('active');
        if (parseInt(step.getAttribute('data-step')) === stepNum) {
          step.classList.add('active');
        }
      });
      
      // 重置当前步骤的选择
      if (stepNum === 1) {
        container.querySelectorAll('.report-reason').forEach(reason => {
          reason.classList.remove('selected');
        });
        container.querySelector('.confirm-btn').disabled = true;
      }
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchReportStyle(style);
      });
    });
    
    // 关闭按钮事件
    closeBtn.addEventListener('click', function() {
      if (confirm('确定要取消举报吗？')) {
        alert('已取消举报');
      }
    });
    
    // 举报原因选择事件
    document.addEventListener('click', function(e) {
      const reasonEl = e.target.closest('.report-reason');
      if (reasonEl) {
        const container = reasonEl.closest('.report-container');
        
        // 移除同组中其他选项的选中状态
        container.querySelectorAll('.report-reason').forEach(el => {
          el.classList.remove('selected');
        });
        
        // 添加当前选项的选中状态
        reasonEl.classList.add('selected');
        selectedReason = reasonEl.getAttribute('data-reason');
        
        // 启用相应的提交/下一步按钮
        if (currentReportStyle === '3') {
          const stepNum = parseInt(reasonEl.closest('.step-content').getAttribute('data-step'));
          const nextBtn = container.querySelector(`.step-content[data-step="${stepNum}"] .next-btn`);
          if (nextBtn) {
            nextBtn.disabled = false;
          }
        } else if (currentReportStyle === '5' && reasonEl.closest('.report-step[data-step="1"]')) {
          const confirmBtn = container.querySelector('.report-step[data-step="1"] .confirm-btn');
          if (confirmBtn) {
            confirmBtn.disabled = false;
          }
        } else {
          const submitBtn = container.querySelector('.submit-btn');
          if (submitBtn) {
            submitBtn.disabled = false;
          }
        }
      }
    });
    
    // 文本框输入事件
    document.addEventListener('input', function(e) {
      if (e.target.classList.contains('info-input')) {
        updateCharCount(e.target);
      }
    });
    
    // 步骤导航事件
    document.addEventListener('click', function(e) {
      if (currentReportStyle === '3') {
        const nextBtn = e.target.closest('.next-btn');
        const prevBtn = e.target.closest('.prev-btn');
        
        if (nextBtn && !nextBtn.disabled) {
          const currentStep = parseInt(nextBtn.closest('.step-content').getAttribute('data-step'));
          goToStep(currentStep + 1);
        }
        
        if (prevBtn && !prevBtn.disabled) {
          const currentStep = parseInt(prevBtn.closest('.step-content').getAttribute('data-step'));
          goToStep(currentStep - 1);
        }
      }
      
      // 确认流程导航
      if (currentReportStyle === '5') {
        const confirmBtn = e.target.closest('.confirm-btn');
        const cancelBtn = e.target.closest('.cancel-btn');
        
        if (confirmBtn) {
          const currentStep = parseInt(confirmBtn.closest('.report-step').getAttribute('data-step'));
          
          if (currentStep === 3) {
            // 最后一步的确认按钮，关闭流程
            alert('举报流程已完成');
            showStep(1);
          } else {
            showStep(currentStep + 1);
          }
        }
        
        if (cancelBtn) {
          const currentStep = parseInt(cancelBtn.closest('.report-step').getAttribute('data-step'));
          
          if (currentStep === 1) {
            // 第一步的取消按钮
            if (confirm('确定要取消举报吗？')) {
              alert('已取消举报');
            }
          } else if (currentStep === 2) {
            showStep(1);
          } else if (currentStep === 3) {
            // 关闭整个举报页面
            alert('已关闭举报页面');
            showStep(1);
          }
        }
      }
    });
    
    // 提交举报事件
    document.addEventListener('click', function(e) {
      const submitBtn = e.target.closest('.submit-btn:not(.step-btn)');
      if (submitBtn && !submitBtn.disabled) {
        if (confirm('确定要提交举报吗？我们会尽快处理。')) {
          alert('举报已成功提交，感谢您的反馈！');
          resetCurrentStyle();
        }
      }
    });
  </script>
</body>
</html>